import React, { Component } from 'react'
import { Input } from 'antd'
import styles from './index.less'
import emptyFileIcon from '@/assets/images/emptyFileIcon.png'

export default class TaskParam extends Component {
  state = {
    rightNavArr: ['任务参数'],
    index: null,
    show: false,
    writeAuth: true,
    dataArr: [
      {
        paramName: 'bdp.system.cyctime',
        paramValue: 'yyyy-MM-dd HH:mm:ss',
      },
      {
        paramName: 'bdp.system.bizdate',
        paramValue: 'yyyy-MM-dd',
      },
      {
        paramName: 'bdp.system.premonth',
        paramValue: 'yyyy-MM-1',
      },
      {
        paramName: 'bdp.system.currmonth',
        paramValue: 'yyyy-MM',
      },
    ],
  };

  getEmpty = () => (
    <div className={`dark_layout_empty_icon ${styles.empty_icon}`}>
      <img className={`dark_layout_empty_icon ${styles.empty_icon_img}`} src={emptyFileIcon} alt="" />
      <li className={styles.none}>暂无参数配置</li>
    </div>
  )

  taskParamValChange(val, key, id) {
    this.props.taskParamValChange && this.props.taskParamValChange(val, key, id)
  }

  render() {
    const {
      dataArr, writeAuth, rightNavArr, index, show,
    } = this.state
    return (
      <div className={styles.task_param}>
        <div className={`${styles.task_param_cen} ${show ? styles.task_param_cen_show : ''}`}>
          <div
            className={styles.task_param_title}
          >
            任务参数
          </div>
          <div
            className={styles.task_param_container}
          >
            <p>
              <span>系统参数配置</span>
            </p>
            <ul>
              {dataArr.map((obj, key) => (
                <>
                  <div title={obj.paramName}>
                    {`${obj.paramName}`}
                  </div>
                  <Input
                    placeholder="请输入值"
                    disabled
                    value={obj.paramValue ? obj.paramValue : undefined}
                    style={{ width: '100%' }}
                  />
                </>
              ))}
            </ul>
            <p>
              <span>自定义参数配置</span>
            </p>
            {this.props.navKey === 5 ? (
              <ul>
                {
                  !this.props.curstoMvariablesArrMr || this.props.curstoMvariablesArrMr && this.props.curstoMvariablesArrMr.length === 0 ? (
                    this.getEmpty()
                  ) : this.props.curstoMvariablesArrMr.map((item) => {
                    if (item.task.id === this.props.editorTaskItem.id) {
                      return (item.arr && item.arr.length) ? (
                        item.arr.map((val, key) => (
                          <li key={key} className={styles.task_param_input}>
                            <span title={val.paramName}>
                              <i style={{ color: 'red' }}>* </i>
                              {val.paramName}
                            </span>
                            ：
                            <Input
                              placeholder="请输入值"
                              disabled={!writeAuth}
                              value={
                                val.paramValue ? val.paramValue : undefined
                              }
                              onChange={(e) => {
                                this.taskParamValChange.call(
                                  this,
                                  e.target.value,
                                  key,
                                  item.task.id,
                                )
                              }}
                              style={{ width: '2rem' }}
                            />
                          </li>
                        ))
                      ) : (
                        this.getEmpty()
                      )
                    }
                    return null
                  })
                }
              </ul>
            ) : (
              <ul>
                {
                  this.props.curstoMvariablesArr && this.props.curstoMvariablesArr.length === 0 && (
                    this.getEmpty()
                  )
                }
                {this.props.curstoMvariablesArr
                  && this.props.curstoMvariablesArr.map((item) => {
                    if (item.task.id === this.props.editorTaskItem.id) {
                      return item.arr && item.arr.length ? (
                        item.arr.map((val, key) => (
                          <li key={key} className={styles.task_param_input}>
                            <span title={val.paramName}>
                              <i style={{ color: 'red' }}>* </i>
                              {val.paramName}
                            </span>
                            ：
                            <Input
                              placeholder="请输入值"
                              disabled={!writeAuth}
                              value={
                                val.paramValue ? val.paramValue : undefined
                              }
                              onChange={(e) => {
                                this.taskParamValChange.call(
                                  this,
                                  e.target.value,
                                  key,
                                  item.task.id,
                                )
                              }}
                              style={{ width: '2rem' }}
                            />
                          </li>
                        ))
                      ) : (
                        this.getEmpty()
                      )
                    }
                    return null
                  })}
              </ul>
            )}
          </div>
        </div>
        <div className={styles.task_param_nav}>
          {rightNavArr.map((o, k) => (
            <span
              onClick={() => {
                this.setState({
                  show: !show,
                  index: index === k ? null : k,
                })
              }}
              className={`${styles.task_param_nav_item} ${index === k ? styles.task_param_nav_item_active : ''}`}
            >
              {o}
            </span>
          ))}
        </div>
      </div>
    )
  }
}

// const reducerData = (state) => ({
//   navKey: state.navkeys.navKey,
//   curstoMvariablesArr: state.curstoMvariablesTask.arr,
//   curstoMvariablesArrMr: state.curstoMvariablesMr.arr,
//   bool: state.shrinks.style,
// })
